<template>
    <div class="container">
        <div style="padding-top: 20px;">
            <el-breadcrumb separator="/" class="breadcrumb">
                <el-breadcrumb-item>
                    <router-link to="/user/location">党建地点</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="main-card">
            <div class="content">
                <div class="location-detail">
                    <el-card class="image-card">
                        <img
                            v-if="locationDetails.photo"
                            :src="locationDetails.photo"
                            alt="Location Image"
                            class="location-image"
                        />
                    </el-card>

                    <div class="location-info">
                        <h2>{{ locationDetails.name }}</h2>
                        <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
                        <p><strong>类型:</strong> {{ locationDetails.type }}</p>
                    </div>

                    <div class="location-description">
                        <h3>详细信息</h3>
                        <p>{{ locationDetails.content }}</p>
                    </div>
                </div>

                <div class="recommendations">
                    <h3>系统推荐</h3>
                    <el-row :gutter="20" class="recommendation-list">
                        <el-col
                            v-for="location in recommendedLocations"
                            :key="location.id"
                            :span="24"
                            class="recommendation-item"
                        >
                            <div
                                class="recommended-content"
                                @click="navigateToLocation(location.id, location.name)"
                            >
                                <img
                                    :src="location.photo"
                                    alt="推荐地点"
                                    class="recommendation-image"
                                />
                                <div class="recommendation-name">{{ location.name }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { selectByNameService, LocationListService } from '@/api/location.js';

export default {
    data() {
        return {
            locationId: this.$route.params.locationId,
            locationName: this.$route.params.locationName,
            locationDetails: {},
            allLocations: [],
            recommendedLocations: [],
        };
    },
    created() {
        this.fetchLocationDetails(); // 获取第一条地点信息
        this.fetchAllLocations(); // 获取推荐地点
    },
    watch: {
        // 监视路由参数，只要参数变化就重新获取详细信息
        '$route.params': {
            immediate: true, // 创建组件时立即触发
            handler() {
                this.locationId = this.$route.params.locationId; // 更新当前 ID
                this.locationName = this.$route.params.locationName; // 更新当前名称
                this.fetchLocationDetails(); // 根据新参数获取详细信息
            },
        },
    },
    methods: {
        async fetchLocationDetails() {
            try {
                const response = await selectByNameService(this.locationName);
                // 检查 response 是否包含数据，必要时可以进行错误处理
                if (response && response.data && response.data.length) {
                    this.locationDetails = response.data[0]; // 更新地点详情
                } else {
                    console.error('No data returned for location.');
                }
            } catch (error) {
                console.error('Error fetching location details:', error);
            }
        },
        async fetchAllLocations() {
            try {
                const response = await LocationListService({ page: 1, size: 10 });
                this.allLocations = response.data.list; // 获取所有地点
                this.getRecommendedLocations(); // 获取推荐地点
            } catch (error) {
                console.error('Error fetching all locations:', error);
            }
        },
        getRecommendedLocations() {
            const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number); // 按某个属性排序
            this.recommendedLocations = sortedLocations.slice(0, 4); // 获取前四个推荐地点
        },
        navigateToLocation(id, name) {
            this.$router.push({ name: 'LocationDetail', params: { locationId: id, locationName: name } }); // 路由跳转
        },
    },
};
</script>

<style scoped>
.container {
    width: 70%;
    margin: 0 auto;
}

.breadcrumb {
    margin-bottom: 20px;
}

.main-card {
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.content {
    display: flex;
    justify-content: space-between;
}

.location-detail {
    flex: 1;
    margin-right: 20px;
}

.image-card {
    margin-bottom: 20px;
}

.location-image {
    width: 100%;
    height: auto;
}

.location-info {
    margin-top: 10px;
}

.location-description {
    margin-top: 20px;
}

.recommendations {
    width: 300px;
}

.recommendation-list {
    display: flex;
    flex-direction: column;
}

.recommendation-item {
    margin-bottom: 20px;
}

.recommended-content {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.recommended-content:hover {
    background-color: #f5f5f5;
}

.recommendation-image {
    width: 100px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

.recommendation-name {
    text-align: left;
}
</style>
